import PageLayout from "@/components/PageLayout";
import { Text } from "@mantine/core";
import { useAPIUtils } from "@/components/APIUtilsProvider";
import { useLocation, useParams } from "react-router-dom";
import UserPill from "@/components/UserPill";
import { Group, Space } from "@mantine/core";
import dayjs from "dayjs";

export default function Notification() {
  const { pathname } = useLocation();
  const { id } = useParams();
  const { restGET, tanstackQuery, tanstackInvalidate, restPOST, restDELETE } =
    useAPIUtils();

  const query = tanstackQuery(`/notifications/${id}`);

  return (
    <PageLayout title={query.data ? `标题：${query.data.title}` : "通知详情"}>
      <Group>
        来自：
        <UserPill username={query.data?.from} />
        时间：
        <Text>
          {dayjs(query.data?.createdAt).format("YYYY-MM-DD HH:mm:ss")}
        </Text>
      </Group>
      <Space h="md" />
      <Text size="lg">{query.data?.content}</Text>
    </PageLayout>
  );
}
